<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Promise
        // 相当于一个容器，保存这个未来才会结束的事件(异步操作)的一个结果
        // 各种异步操作都可以用同样的方法进行处理 axios

        // 特点
        // 1，对象的状态不受外界影响   处理异步操作的三个状态  Pending(进行中) Resolved(成功) Rejected(失败)
        // 2，一旦状态改变，就不会再变，任何时候都可以得到这个结果
        // let pro = new Promise(function(resolved,rejected){
        //     // 执异步操作
        //     let res={
        //         code:200,
        //         data:{
        //             name:'小胖子'
        //         },
        //     error:'失败了'
        //     }
        //     setTimeout(()=>{
        //         if(res.code==200){
        //             resolved(res.data);
        //         }else{
        //             rejected(res.error);
        //         }
        //     },1000);
        // })
        // console.log(pro);
        // pro.then((val)=>{
        //     console.log(val);
        // },(err)=>{
        //     console.log(err);
        // })

        // 封装代码
        // function timeOut(ms){
        //     return new Promise((resolved,rejected)=>{
        //         setTimeout(()=>{
        //             resolved('hello promise success!!')
        //         },ms)
        //     })
        // }
        // timeOut(2000).then((val)=>{
        //     console.log(val);
        // })


        // https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976

        // const getJSON=function(url){
        //     return new Promise((resolve,reject)=>{
        //         const xhr= new XMLHttpRequest();
        //         xhr.open('GET',url);
        //         xhr.onreadystatechange=handler;
        //         xhr.responseType='json';
        //         xhr.setRequestHeader('Accept','application/json')
        //         // 发送
        //         xhr.send();
        //         function handler(){
        //             if(this.readyState===4){
        //                 if (this.status===200){
        //                     resolve(this.response.HeWeather6);
        //                 }else{
        //                     reject(new Error(this.statusText));
        //                 }
        //             }
        //         }
        //     })
        // }
        // getJSON('https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976').then((data)=>{
        //     console.log(data);
        // },(error)=>{
        //     console.log(error);
        // })
        




        // then()方法
        // then()第一个参数是relove回调函数，第二个参数是可选的   是reject状态回调的函数
        // then()返回一个新的promise实例，可以采用链式编程
        //     const getJSON=function(url){
        //         return new Promise((resolve,reject)=>{
        //             const xhr= new XMLHttpRequest();
        //             xhr.open('GET',url);
        //             xhr.onreadystatechange=handler;
        //             xhr.responseType='json';
        //             xhr.setRequestHeader('Accept','application/json')
        //             // 发送
        //             xhr.send();
        //             function handler(){
        //                 if(this.readyState===4){
        //                     if (this.status===200){
        //                         resolve(this.response.HeWeather6);
        //                     }else{
        //                         reject(new Error(this.statusText));
        //                     }
        //                 }
        //             }
        //         })
        //     }
        //    let a= getJSON('https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
        //    .then((data)=>{
        //         console.log(data);
        //     },(error)=>{
        //         console.log(error);
        //     })
        //     console.log(a);
    //     const getJSON=function(url){
    //         return new Promise((resolve,reject)=>{
    //             const xhr= new XMLHttpRequest();
    //             xhr.open('GET',url);
    //             xhr.onreadystatechange=handler;
    //             xhr.responseType='json';
    //             xhr.setRequestHeader('Accept','application/json')
    //             // 发送
    //             xhr.send();
    //             function handler(){
    //                 if(this.readyState===4){
    //                     if (this.status===200){
    //                         resolve(this.response.HeWeather6);
    //                     }else{
    //                         reject(new Error(this.statusText));
    //                     }
    //                 }
    //             }
    //         })
    //     }
    //   getJSON('https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
    //    .then((data)=>{
    //         console.log(data);
    //     }).catch(err=>{
    //         console.log(err)
    //     })


        // catch(err=>{
        //     console.log(err)
        // })
        // 等价于
        // then(null,err=>{
        //     console.log(err)
        // })




        // resolve()   reject()   all()  race()  done()   finally()
        // resolve()能将现有的任何对象转换成promise对象
        // let p=Promise.resolve('foo');   //等价下一行
        // let p = new Promise(resolve=>resolve('foo'));  //等价上一行
        // console.log(p);
        // p.then((data)=>{
        //     console.log(data);
        // })

            // 用race请求一张图片
            function requestImg(imgSrc){
                return new Promise((resolve,rejece)=>{
                    const img =new Image();
                    img.onload=function(){
                        resolve(img);
                    }
                    img.src=imgSrc;
                })
            }
            function timeout(){
                return new Promise((resolve,reject)=>{
                    setTimeout(()=>(
                        reject('图片请求超时')
                    ),3000)
                })
            }
            Promise.race([requestImg('http://b-ssl.duitang.com/uploads/item/201607/31/20160731101714_NsALZ.thumb.700_0.jpeg'),timeout()]).then(data=>{
                console.log(data);
                document.body.appendChild(data);
            }).catch(err=>{
                console.log(err)
            })
    </script>
</body>
</html>